<!-- 分页 -->
<template>
  <div class="paging-container">
    <span class="item" :class="{disabled:props.page === 1}" @click="changePage(1)">&lt;&lt;</span>
    <span class="item" :class="{disabled:props.page === 1}" @click="changePage(props.page - 1)">&lt;</span>
    <span class="item" v-for="item in renderingData" :key="item" :class="{select:item===props.page}" @click="changePage(item)">{{ item }}</span>
    <span class="item" :class="{disabled:props.page === Math.ceil(props.total / props.limit)}" @click="changePage(props.page + 1)">&gt;</span>
    <span class="item" :class="{disabled:props.page === Math.ceil(props.total / props.limit)}" @click="changePage(Math.ceil(props.total / props.limit))">&gt;&gt;</span>
    <span class="item total">共{{ props.total }}条</span>
  </div>
</template>

<script setup>
import {computed, ref} from "vue"
const props = defineProps({
    // 总数据数
    total:{
        type: Number,
        required:true
    },
    // 当前页
    page:{
        type: Number,
        default: 1,
    },
    // 展示多少页码
    showPage:{
        type: Number,
        default: 6
    },
    limit:{
        type: Number,
        default: 10
    }
})
const showPageRef = ref() 
// 计算需要渲染的数组
const renderingData = computed(() => {
    showPageRef.value = Math.ceil(props.total / props.limit) < props.showPage ? Math.ceil(props.total / props.limit) : props.showPage; // 计算出总共能够展示多少页码 总条数 / 页面数据条数 < 定义的展示多少页码 ?  总条数 / 页面数据条数 : 定义的展示多少页码
    let arr = [];
    const minMedianNum = Math.floor(showPageRef.value / 2); // 保持中间选中的最小数
    const maxMedianNum = Math.ceil(props.total / props.limit) -  minMedianNum; // 保持中间选中的最大数
    if(props.page < minMedianNum){
        for (let index = 0; index < showPageRef.value; index++) {
            arr.push(index + 1)
        }
        return arr
    }
    if(props.page > maxMedianNum){
        for (let index = Math.ceil(props.total / props.limit); arr.length < showPageRef.value; index--) {
            arr.push(index)
        }
        return arr.reverse()
    }
    let index = props.page  // 计算出数组从几开始
    if(showPageRef.value !== 1){
        index = props.page - 1 <= 0 ? 1 :  props.page - 1
    }
    for(let i = index; arr.length < showPageRef.value; i++){
        arr.push(i)
    }
    return arr
})
const emit = defineEmits(["click"])
function changePage(item){
    // console.log(item);
    if(item > Math.ceil(props.total / props.limit) || item < 1){
        return
    }
    emit("click",item)
}
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.paging-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .item{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid @gray;
    cursor: pointer;
    display: block;
    text-align: center;
    margin: 0 5px;
    border-radius:5px ;
    &.disabled{
        cursor: no-drop;
        color: @gray;
        opacity: 0.4;
    }
    &.select{
        background-image: linear-gradient(10deg,@frameColor1,@frameColor2);
        text-shadow: 2px 2px 10px #3b3b3b;
        border: 0;
    }
    &.total{
        cursor: auto;
        width: 90px;
        border: 0;
        font-size: 14px;
        color: @gray;
    }
  }
}
</style>